<template>
    <div class="appTable">
        <div class="table">
            <div class="mask"></div>
            <div class="table_title">{{ table_title }}管理</div>
            <div class="table_btns" v-if="operate && showAdd">
                <el-button @click="handleAdd" style="margin-right: 4%" type="primary" icon="el-icon-folder-add">添加</el-button>
                <!-- <el-button @click="dialogTableVisible = true" style="margin-right: 4%" type="primary" icon="el-icon-folder-add">导入</el-button> -->
            </div>
            <div class="table_body">
                <zy-table :loading="loading" :tableData="tableData" :tableColumn="tableColumn" :pageSize="pagination.pageSize" :total="pagination.total" @changePage="changePage"></zy-table>
            </div>
            <zy-form ref="zyform" :dialog="dialog" @add="add" @set="edit" />
        </div>
        <el-dialog title="导入数据" :visible.sync="dialogTableVisible">
            <el-upload ref="upload" :action="`/api/${url}/upload`" :file-list="fileList" :auto-upload="false" accept=".xlsx" :on-success="handSuccess" :on-change="handleChange" :on-progress="handError">
                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                <el-button style="margin-left: 10px" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
                <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
            </el-upload>
        </el-dialog>
    </div>
</template>

<script>
import { requestApi } from '@/requset/api'
import zyTable from '@/components/common/zyTable.vue'
import zyForm from '@/components/common/zyForm.vue'
import { deepClone } from '@/plugins/clone'

export default {
    components: {
        zyTable,
        zyForm,
    },
    data() {
        return {
            showAdd: true,
            tableColumn: [],
            dialog: {
                labelWidth: '80px',
                config: [],
                form: {},
                title: '',
            },
            none: [null, undefined, ''],
            loading: false,
            table_title: '',
            url: '',
            tableData: [],
            baseForm: {},
            queryForm: {
                size: 20,
                page: 1,
            },
            pagination: {},
            confirmText: '确认删除此条数据?',
            dialogTableVisible: false,
            fileList: [],
        }
    },
    methods: {
        from(data) {
            return data
        },
        to(data) {
            return data
        },
        changePage(e) {
            this.queryForm.page = e
            this.getlist()
        },
        BeforeAdd() {},
        BeforeEdit() {},
        handleAdd() {
            this.BeforeAdd()
            this.dialog.title = '添加' + this.table_title

            this.dialog.form = deepClone(this.baseForm)
            this.$refs.zyform.openDialog('add')
        },
        handleEdit(val) {
            this.BeforeEdit()
            this.dialog.title = '编辑' + this.table_title
            this.dialog.form = this.from(deepClone(val))
            this.$refs.zyform.openDialog('change')
        },
        submitUpload() {
            if (this.fileList.length === 0) {
                this.$message.error('导入文件不能为空')
                return
            }
            if (this.fileList.length > 1) {
                this.$message.error('一次只能导入一个文件')
                return
            }
            this.$refs.upload.submit()
            this.loadingAll = Loading.service({
                target: 'body',
                background: 'rgb(0,0,0,.4)',
            })
        },
        handleChange(file, fileList) {
            this.fileList = fileList
        },
        handSuccess(res) {
            this.$refs.upload.clearFiles()
            this.fileList = []
            if (res.code === 0) {
                this.$message.success(res.msg)
                this.dialogTableVisible = false
                setTimeout(() => {
                    this.searchBtn()
                }, 200)
            } else {
                this.$message.error((res.msg ? res.msg : '') + '导入失败')
            }
        },
        handError(res) {
            this.loadingAll.close()
        },
        add(data) {
            requestApi('post', this.url + '/add', this.to(deepClone(data))).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功',
                    })
                    this.getlist()
                    this.$refs.zyform.closeDialog()
                }
            })
        },
        delete(data) {
            this.$confirm(this.confirmText, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    requestApi('post', this.url + '/delete', data).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功',
                            })
                            if (this.tableData.length === 1 && this.queryForm.page !== 0) {
                                this.queryForm.page--
                            }
                            this.getlist()
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        edit(data) {
            requestApi('post', this.url + '/edit', this.to(deepClone(data))).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '编辑成功',
                    })
                    this.getlist()
                    this.$refs.zyform.closeDialog()
                }
            })
        },
        getlist() {
            this.loading = true
            requestApi('post', this.url + `/getlist`, this.queryForm)
                .then((res) => {
                    if (res.data.code == 0) {
                        this.tableData = res.data.data
                        this.pagination = res.data.pagination
                    }
                })
                .finally(() => {
                    this.loading = false
                })
        },
    },
    computed: {
        operate() {
            return parseInt(sessionStorage.getItem('operate')) === 1
        },
    },
}
</script>

<style lang="less" scoped>
@import url(@/assets/css/table.less);
.table_title {
    font-size: 20px;
    color: #00ddff;
    font-weight: 600;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-between;
    background-image: url(@/assets/common/form_item_bg.png);
    background-size: 100% 100%;
    padding: 0 20px;
}
.el-button {
    width: 80px;
    margin-left: 20px;
    height: 40px;
    background-color: #007bff;
    border-color: #007bff;
    color: white;
    display: flex;
    justify-content: center !important;
}
.table_btns {
    flex: 1;
    display: flex;
    justify-content: right;
}
</style>
